<template>
  <div class="subject">
    <el-row class="JADP-common-search-box" :gutter="16" v-if="query.cpid">
      <el-form>
        <el-col :span="4">
          <el-form-item label="题型">
            <el-select
              v-model="form.topictype"
              placeholder="请选择题型"
              clearable
            >
              <el-option
                v-for="(item, index) in getDict('topictype')"
                :key="index"
                :value="item.id"
                :label="item.dataName"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="难度">
            <el-select
              v-model="form.difficultion"
              placeholder="请选择难度"
              clearable
            >
              <el-option
                v-for="(item, index) in getDict('difficultion')"
                :key="index"
                :value="item.id"
                :label="item.dataName"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="initData()"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh-right" @click="reset()"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div v-loading="loading" element-loading-text="数据加载中" class="mycard">
      <el-empty v-if="!list.length" description="暂无数据"></el-empty>
      <el-card
        shadow="hover"
        class="mysubject"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="subject_title">
          <span class="font">
            {{ item.subsort }}、[{{
              getDict("topictype", item.xy_ks_subjectEntity.topictype)
            }}]</span
          >
          [难度系数：{{
            getDict("difficultion", item.xy_ks_subjectEntity.difficultion)
          }}]
          <div class="title_right">
            <span class="primary"
              >正确率：{{ item.correctRate | toFixed }}</span
            >
            <el-button-group>
              <el-button
                icon="el-icon-full-screen"
                @click="$set(item, 'openFlag', !item.openFlag)"
                >{{ item.openFlag ? "收起" : "展开" }}</el-button
              >
            </el-button-group>
          </div>
        </div>
        <div class="subject_body">
          <div v-html="item.xy_ks_subjectEntity.stem"></div>
          <!--单选题  -->
          <div
            v-show="item.openFlag"
            v-if="
              item.xy_ks_subjectEntity.topictype ===
                '7280c24ba6bf410997c739637706e7e6'
            "
          >
            <el-radio-group disabled v-model="item.xy_ks_subjectEntity.result">
              <ul>
                <li
                  v-for="(val, inx) in item.xy_ks_subjectEntity.optionsum"
                  :key="inx"
                >
                  <el-radio :label="val.id"
                    ><span class="proportion"
                      >选择人次：{{ val.cs }}次；占比：{{ val.zb }}</span
                    >
                    {{ val.label }}、{{ val.value }}</el-radio
                  >
                </li>
              </ul>
            </el-radio-group>
            <div>
              <el-row>
                <el-col :span="1">解析:</el-col>
                <el-col :span="22">
                  <div v-html="item.xy_ks_subjectEntity.answeranalysis"></div>
                </el-col>
              </el-row>
            </div>
          </div>
          <!--多选题  -->
          <div
            v-show="item.openFlag"
            v-if="
              item.xy_ks_subjectEntity.topictype ===
                '1d3f7e7e22c94e49ba95f52e3ec9e3af'
            "
          >
            <el-checkbox-group
              disabled
              v-model="item.xy_ks_subjectEntity.result"
            >
              <ul>
                <li
                  v-for="(val, inx) in item.xy_ks_subjectEntity.optionsum"
                  :key="inx"
                >
                  <!-- <el-radio :label="val.id">{{ val.value }}</el-radio> -->
                  <el-checkbox :label="val.id">
                    <!-- <span class="proportion"
                      >选择人次：{{ val.cs }}次；占比：{{ val.zb }}</span
                    > -->
                    {{ val.label }}、{{ val.value }}</el-checkbox
                  >
                </li>
              </ul>
            </el-checkbox-group>
            <div>
              <el-row>
                <el-col :span="1">解析:</el-col>
                <el-col :span="22">
                  <div v-html="item.xy_ks_subjectEntity.answeranalysis"></div>
                </el-col>
              </el-row>
            </div>
          </div>
          <!--填空题  -->
          <div
            v-show="item.openFlag"
            v-if="
              item.xy_ks_subjectEntity.topictype ===
                'f0b4073bc9ad4426b87cbc70d4526cf6'
            "
          >
            <div style="margin:20px 0">
              答案：
              <span
                v-for="(val, inx) in item.xy_ks_subjectEntity.optionsum"
                :key="inx"
                style="margin-right:10px"
              >
                <!-- <el-radio :label="val.id">{{ val.value }}</el-radio> -->
                {{ val.value }};
              </span>
            </div>

            <div>
              <el-row>
                <el-col :span="1">解析:</el-col>
                <el-col :span="22">
                  <div v-html="item.xy_ks_subjectEntity.answeranalysis"></div>
                </el-col>
              </el-row>
            </div>
          </div>
          <!--判断题  -->
          <div
            v-show="item.openFlag"
            v-if="
              item.xy_ks_subjectEntity.topictype ===
                'ee505074164e4d0bb54e4a5136b123fb'
            "
          >
            <div style="margin:20px 0">
              答案：
              <el-radio-group
                disabled
                v-model="item.xy_ks_subjectEntity.result"
              >
                <el-radio label="正确"></el-radio>
                <el-radio label="错误"></el-radio>
              </el-radio-group>
            </div>
            <div>
              <el-row>
                <el-col :span="1">解析:</el-col>
                <el-col :span="22">
                  <div v-html="item.xy_ks_subjectEntity.answeranalysis"></div>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 简单题 -->
          <div
            v-show="item.openFlag"
            v-if="
              item.xy_ks_subjectEntity.topictype ===
                '07ba1e3b779b4e1db3c1318d0f80a688'
            "
          >
            <div style="margin:20px 0">
              答案：
              <p v-html="item.xy_ks_subjectEntity.result"></p>
            </div>
            <div>
              <el-row>
                <el-col :span="1">解析:</el-col>
                <el-col :span="22">
                  <div v-html="item.xy_ks_subjectEntity.answeranalysis"></div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "subject",
  props: {
    query: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      form: {
        topictype: "",
        difficultion: ""
      },
      loading: false,
      list: []
    };
  },
  filters: {
    toFixed(val) {
      return (val * 100).toFixed(1) + "%";
    }
  },
  methods: {
    initData() {
      this.loading = true;
      let query_ = {
        ...this.query,
        ...this.form
      };
      request({
        url: "/api/statistics/StatisticsController/topicStatistics",
        method: "GET",
        data: query_
      }).then(res => {
        this.list = res.data;
        this.list = this.list.sort((a, b) => a.subsort - b.subsort);
        this.list.forEach(item => {
          // 判断不等于简答题，不等于判断题
          if (
            item.xy_ks_subjectEntity.topictype !==
              "07ba1e3b779b4e1db3c1318d0f80a688" &&
            item.xy_ks_subjectEntity.topictype !==
              "ee505074164e4d0bb54e4a5136b123fb"
          ) {
            item.xy_ks_subjectEntity.result = JSON.parse(
              item.xy_ks_subjectEntity.result
            );
            item.xy_ks_subjectEntity.optionsum = JSON.parse(
              item.xy_ks_subjectEntity.optionsum
            );
          }
          // if (
          //   item.xy_ks_subjectEntity.topictype ===
          //   "1d3f7e7e22c94e49ba95f52e3ec9e3af"
          // ) {
          //   //判断多选，把正确答案的数组转join()
          //   item.xy_ks_subjectEntity.result = item.xy_ks_subjectEntity.result.join();
          // }
          // 判断如果已经给过分数了，就不计算用再次计算分数了
          if (item.subscore == undefined && item.subscore == null) {
            if (
              item.xy_ks_subjectEntity.topictype !==
                "07ba1e3b779b4e1db3c1318d0f80a688" &&
              item.xy_ks_subjectEntity.topictype !==
                "f0b4073bc9ad4426b87cbc70d4526cf6"
            ) {
              //判断不等于简单和填空
              //判断考生答案和正确答案是否正确，答对给满分，答错不给分
              if (item.xy_ks_subjectEntity.result == item.answer) {
                item.subscore = item.score;
                item.status = true;
              } else {
                item.subscore = 0;
                item.status = false;
              }
            } else {
              // 简答和填空的情况根据分数判断
              if (item.subscore * 1 == item.score * 1) {
                item.status = true;
              } else {
                item.status = false;
              }
            }
          }
        });
        this.loading = false;
        console.log(this.list, 112233);
      });
    },
    reset() {
      for (let key in this.form) {
        this.form[key] = undefined;
      }
      this.initData();
    }
  }
};
</script>
<style scoped lang="scss">
.subject {
  .mycard {
    height: 350px;
    overflow-y: auto;
    .mysubject {
      margin-bottom: 20px;
      width: 100%;
      .subject_title {
        width: 100%;
        .checkbox {
          cursor: pointer;
        }
        .font {
          font-size: 18px;
          font-weight: 600;
        }
        .title_right {
          float: right;
          margin-right: 50px;
          .primary {
            display: inline-block;
            border: 1px solid #b3d8ff;
            background-color: #ecf5ff;
            line-height: 30px;
            font-size: 14px;
            border-radius: 3px;
            color: #409eff;
            margin-right: 5px;
            padding: 0 5px;
          }
        }
      }
      .subject_body {
        width: 100%;
        margin-top: 20px;
        margin-left: 25px;
        line-height: 22px;
        ul {
          margin-top: 20px;
          li {
            line-height: 30px;
            >>> .el-radio__label {
              font-size: 16px;
            }
          }
        }
        .proportion {
          border: 1px solid #ccc;
          font-size: 12px;
          background-color: #f7f7f7;
          padding: 5px;
          border-radius: 3px;
        }
      }
    }
  }
}
</style>
